import React, { useEffect, useRef } from 'react';
import { AWSCProps } from '../interface';

const Awsc: React.FC<AWSCProps> = (props) => {
  const { onSuccess, onError, onFail } = props;
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let destroy = false;

    window.AWSC.use('nc', function (state: string, module: AWSCModule.NCModule) {
      if (destroy) {
        return;
      }
      ref.current!.innerHTML = '';
      const myLang = {
        cn: {
          //加载状态提示。
          LOADING: '加载中...',
          //等待滑动状态提示。
          SLIDE: '向右滑动验证',
          //验证通过状态提示。
          SUCCESS: '验证通过',
          //验证失败触发拦截状态提示。
          ERROR: '非常抱歉，网络出错了...',
          //验证失败触发拦截状态提示。
          FAIL: '验证失败，请重试',
        },
      };

      // 初始化
      const nc = module.init({
        // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
        appkey: 'FFFF0N0000000000A0BA',
        //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
        scene: 'nc_login',
        // 声明滑动验证需要渲染的目标ID。
        renderTo: 'nc',
        upLang: myLang,
        // test:module.TEST_BLOCK,
        //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
        success: function (data: AWSCModule.NCSuccessData) {
          console.log('滑块验证--操作成功--data--:', data);
          onSuccess?.(data);
        },
        // 滑动验证失败时触发该回调参数。
        fail: function (failCode: AWSCModule.NCFailData) {
          console.log('滑块验证--操作失败--failCode--:', failCode);
          onFail?.(failCode);
          nc.reset();
        },
        // 验证码加载出现异常时触发该回调参数。
        error: function (errorCode: AWSCModule.NCErrorData) {
          console.log('滑块验证--异常--errorCode--:', errorCode);
          onError?.(errorCode);
        },
      });
    });
    return () => {
      destroy = true;
    };
  }, []);

  return <div id="nc" ref={ref}></div>;
};

export default Awsc;
